<script setup lang="ts">
import { ref } from 'vue';
import MyTable from './components/MyTable.vue'

// 定义类型
export interface Person {
  id:number
  name:string
  age:number
}

const list = ref<Person[]>([
  { id: 1, name: '张小花', age: 18 },
  { id: 2, name: '孙大明', age: 19 },
  { id: 3, name: '刘德忠', age: 17 },
])

const list2 = ref<Person[]>([
  { id: 1, name: '赵小云', age: 18 },
  { id: 2, name: '刘蓓蓓', age: 19 },
  { id: 3, name: '姜肖泰', age: 17 },
])

// 可以获取到需要删除的数据
const delItem = (obj:any)=>{
// console.log(obj);
list.value = list.value.filter(v=>v.id!=obj.id)
}

// 查看的id数据
const lookData = (obj:any)=>{
alert(JSON.stringify(obj))
}

</script>

<template>
  <MyTable :data="list">
    <template #default="obj">
      <button @click="delItem(obj)">删除他</button>
    </template>
  </MyTable>

  <MyTable :data="list2">
    <template #default="obj">
      <button @click="lookData(obj)"> 查看他</button>
    </template>
  </MyTable>
</template>

<style scoped>
body {
  background-color: #b3b3b3;
}
</style>
